<!DOCTYPE html>
<html>
  
  <head></head>
  
  <body class="hold-transition skin-blue sidebar-mini">
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>AdminLTE 2 | Icons</title>
      <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
      <link rel="stylesheet" href="css/bootstrap.min.css">
      <link rel="stylesheet" href="css/font-awesome.min.css">
      <link rel="stylesheet" href="css/ionicons.min.css">
      <link rel="stylesheet" href="css/AdminLTE.min.css">
      <link rel="stylesheet" href="css/skins/_all-skins.min.css">
      <link rel="stylesheet" href="css/dataTables.bootstrap.min.css"></head>
    <link rel="stylesheet" href="css/style.css">
    <div class="wrapper">
      <header class="main-header">
        <a href="index2.html" class="logo">
          <span class="logo-mini">
            <b>A</b>LT</span>
          <span class="logo-lg">
            <b>AdminLTE</b>
          </span>
        </a>
        <nav class="navbar navbar-static-top">
          <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
            <span class="sr-only">Toggle navigation</span></a>
          <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
              <li>
                <a href="#" id="log-out">
                  <i class="fa fa-mail-reply"></i>退出登录</a>
              </li>
            </ul>
          </div>
        </nav>
      </header>
      <aside class="main-sidebar">
        <section class="sidebar">
          <ul class="sidebar-menu" data-widget="tree">
            <li>
              <a href="/index.html">
                <i class="fa fa-home"></i>
                <span>首页</span></a>
            </li>
            <li class="treeview">
              <a href="#">
                <i class="fa fa-th"></i>
                <span>投诉建议</span>
                <span class="pull-right-container">
                  <i class="fa fa-angle-left pull-right"></i>
                </span>
              </a>
              <ul class="treeview-menu">
                <li>
                  <a href="/tsjy.html">
                    <i class="fa fa-circle-o"></i>投诉建议</a>
                </li>
              </ul>
            </li>
          </ul>
        </section>
      </aside>
      <div class="content-wrapper">
        <section class="content-header">
          <h1>账号管理</h1>
          <ol class="breadcrumb">
            <li>
              <a href="#">
                <i class="fa fa-dashboard"></i>首页</a>
            </li>
            <li class="active">当前</li></ol>
        </section>
        <section class="content">
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">筛选用户</h3></div>
            <form class="form-horizontal">
              <div class="box-body">
                <div class="col-sm-4 form-group">
                  <label class="col-sm-3 control-label width-auto">套餐管理</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="col-sm-4 form-group">
                  <label class="col-sm-3 control-label width-auto">套餐名称</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="col-sm-4 form-group">
                  <label class="col-sm-3 control-label width-auto">付费类型</label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <button type="button" class="btn btn-primary">
                  <i class="fa fa-search"></i>查询</button>
              </div>
            </form>
          </div>
          <div class="box">
            <div class="box-header">
              <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                <i class="fa fa-pencil-square-o"></i>新增</button>
              <button type="button" class="btn btn-primary pull-right">
                <i class="fa fa-file-excel-o"></i>导出Excel</button>
            </div>
            <div class="box-body">
              <div id="example2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                <div class="row">
                  <div class="col-sm-6"></div>
                  <div class="col-sm-6"></div>
                </div>
                <div class="row">
                  <div class="col-sm-12">
                    <table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
                      <thead>
                        <tr role="row">
                          <th>套餐名称</th>
                          <th>套餐类型</th>
                          <th>适用国家/地区</th>
                          <th>付费类型</th>
                          <th>套餐价格</th>
                          <th>状态</th>
                          <th>操作</th>
                      </tr>
                      </thead>
                      <tbody>
                        <tr role="row" class="odd">
                          <td>Gecko</td>
                          <td>Seamonkey 1.1</td>
                          <td>Win 98+ / OSX.2+</td>
                          <td>1.8</td>
                          <td>Gecko</td>
                          <td>
                            <span class="text-green">有效</span>
                          </td>
                          <td>
                            <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-success btn-xs">
                              <i class="fa fa-wrench"></i>编辑</button>
                            <button type="button" class="btn btn-danger btn-xs">
                              <i class="fa fa-trash-o"></i>删除</button>
                              <button type="button" class="btn btn-warning btn-xs">
                              <i class="fa fa-remove"></i>停用</button>
                          </td>
                          </tr>
                        <tr role="row" class="even">
                          <td>Gecko</td>
                          <td>Seamonkey 1.1</td>
                          <td>Win 98+ / OSX.2+</td>
                          <td>1.8</td>
                          <td>Gecko</td>
                          <td>
                            <span class="text-red">无效</span>
                          </td>
                          <td>
                            <button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-success btn-xs">
                              <i class="fa fa-wrench"></i>编辑</button>
                            <button type="button" class="btn btn-danger btn-xs">
                              <i class="fa fa-trash-o"></i>删除</button>
                               <button type="button" class="btn btn-info btn-xs">
                              <i class="fa fa-check"></i>启用</button>
                          </td>
                          </tr>
                    </table>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-5">
                    <div class="dataTables_info" id="example2_info" role="status" aria-live="polite">Showing 1 to 10 of 57 entries</div></div>
                  <div class="col-sm-7">
                    <div class="dataTables_paginate paging_simple_numbers" id="example2_paginate">
                      <ul class="pagination">
                        <li class="paginate_button previous disabled" id="example2_previous">
                          <a href="#" aria-controls="example2" data-dt-idx="0" tabindex="0">Previous</a></li>
                        <li class="paginate_button active">
                          <a href="#" aria-controls="example2" data-dt-idx="1" tabindex="0">1</a></li>
                        <li class="paginate_button ">
                          <a href="#" aria-controls="example2" data-dt-idx="2" tabindex="0">2</a></li>
                        <li class="paginate_button ">
                          <a href="#" aria-controls="example2" data-dt-idx="3" tabindex="0">3</a></li>
                        <li class="paginate_button ">
                          <a href="#" aria-controls="example2" data-dt-idx="4" tabindex="0">4</a></li>
                        <li class="paginate_button ">
                          <a href="#" aria-controls="example2" data-dt-idx="5" tabindex="0">5</a></li>
                        <li class="paginate_button ">
                          <a href="#" aria-controls="example2" data-dt-idx="6" tabindex="0">6</a></li>
                        <li class="paginate_button next" id="example2_next">
                          <a href="#" aria-controls="example2" data-dt-idx="7" tabindex="0">Next</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.box-body --></div>
        </section>
      </div>
      <div class="control-sidebar-bg"></div>
    </div>
    <div class="modal fade" id="myModal">
      <div class="modal-dialog" style="width: 1000px">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title">添加套餐</h4></div>
          <div class="row">
            <form class="col-md-12 form-horizontal">
              <div class="modal-body">
                <div class="row">
                <h5 class="title-body">基本信息</h5>
                <div class="form-group col-sm-6">
                  <label class="col-sm-3 control-label">套餐名称<span>*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-3 control-label">套餐有效期<span>*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-3 control-label">时区<span>*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-3 control-label">付费类型<span>*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-3 control-label">套餐优先级<span>*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-3 control-label">国家/地区<span>*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-3 control-label">套餐价格<span>*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-3 control-label">状态<span>*</span></label>
                  <div class="col-sm-9">
                    <input type="text" class="form-control"></div>
                </div>
                <div class="form-group col-sm-6">
                  <label class="col-sm-3 control-label">备注</label>
                  <div class="col-sm-8">
                    <textarea type="text" class="form-control"></textarea></div>
                </div>
              </div>
              <h5 class="title-body">流量周期信息</h5>
              <ul class="body-list">
                  <ol>1. 固定使用/ 77天/ 77次</ol>
                  <li>1</li>
                  <li>流量包</li>
                  <li>77M</li>
                  <li>77kbps</li>
                  <li>77kbps</li>
                  <li>77￥/M</li>
                </li>
              </ul>
              <h5 class="title-body">关联卡类型</h5>
              <table class="table table-bordered table-hover">
                <thead>
                  <tr>
                    <th>国家/地区</th>
                    <th width="50%">类型</th>
                  </tr>
                </thead>
                <tbody>
                <tr>
                  <td>中国</td>
                  <td>
                    <div class="checkbox">
                    <input type="checkbox" class="minimal chk_1">
                     <label class="checkbox-style">
                      实体卡
                    </label>
                  </div>
                  <div class="checkbox">
                    <input type="checkbox" class="minimal chk_1">
                     <label class="checkbox-style">
                      虚拟卡
                    </label>
                  </div><div class="checkbox">
                    <input type="checkbox" class="minimal chk_1">
                     <label class="checkbox-style">
                      实体卡
                    </label>
                  </div>
                  <div class="checkbox">
                    <input type="checkbox" class="minimal chk_1">
                     <label class="checkbox-style">
                      虚拟卡
                    </label>
                  </div><div class="checkbox">
                    <input type="checkbox" class="minimal chk_1">
                     <label class="checkbox-style">
                      实体卡
                    </label>
                  </div>
                  <div class="checkbox">
                    <input type="checkbox" class="minimal chk_1">
                     <label class="checkbox-style">
                      虚拟卡
                    </label>
                  </div><div class="checkbox">
                    <input type="checkbox" class="minimal chk_1">
                     <label class="checkbox-style">
                      实体卡
                    </label>
                  </div>
                  <div class="checkbox">
                    <input type="checkbox" class="minimal chk_1">
                     <label class="checkbox-style">
                      虚拟卡
                    </label>
                  </div>
                  </td>
                  </tbody>
                </tr>
              </table>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">添加</button></div>
              </from>
             
          </div>
        </div>
      </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>

</html>